<!--
 * @Author: your name
 * @Date: 2020-05-25 15:44:07
 * @LastEditTime: 2020-06-12 16:38:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \IM_Web\im_web\src\views\index\index.vue
--> 
<template>
    <div class="index flex align_center justify_center">
        <!-- shouye
        <button @click="sendMsgDone">发送</button>-->
        <div class="index_content flex">
            <div class="index_content_left flex flex_direction align_center">
                <div class="avatar" @contextmenu.prevent="onContextmenu">
                    <div :style="{background:`url(${avatar})`,backgroundSize:'100% 100%'}"></div>
                </div>
                <div class="tabs_item">
                    <div
                        :class="tabsIndex===1?'active news_icon_active':'default news_icon'"
                        @click="changeTabs(1)"
                    ></div>
                </div>
                <div class="tabs_item">
                    <div
                        :class="tabsIndex===2?'active address_book_icon_active':'default address_book_icon'"
                        @click="changeTabs(2)"
                    ></div>
                </div>
                <div class="tabs_item">
                    <div
                        :class="tabsIndex===3?'active center_icon_active':'default center_icon'"
                        @click="changeTabs(3)"
                    ></div>
                </div>
            </div>
            <div style="width:93%" v-show="!spinShow">
                <RightContent />
            </div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </div>
    </div>
</template>

<script>
import RightContent from "../../components/rightContent/index";
export default {
    inject:['reload'],
    props: {},
    data() {
        return {
            tabsIndex: 1,
            avatar: require("../../assets/images/default/user_icon.png"),
            spinShow: false
        };
    },
    computed: {},
    created() {
        this.tabsIndex = this.$store.state.Tabs;
        let info = JSON.parse(sessionStorage.getItem("info"));
        this.avatar = info.avatar === "" ? this.avatar : info.avatar;
    },
    mounted() {},
    watch: {},
    methods: {
        changeTabs(val) {
            this.tabsIndex = val;
            this.$store.dispatch("aEditTbas", val);
            sessionStorage.setItem("tabs", +val);
            // this.$store.dispatch("resetCurrSession");
        },
        onContextmenu() {
            // let attrs = vNode.data.attrs
            this.$contextmenu({
                items: [
                    {
                        label: "退出登录",
                        onClick: () => {
                            this.logout()
                        }
                    }
                ],
                event,
                //x: event.clientX,
                //y: event.clientY,
                customClass: "class-a",
                zIndex: 3,
                minWidth: 80
            });
            return false;
        },
        logout() {
            let params = {
                uuid:JSON.parse(sessionStorage.getItem("info")).uuid
            }
            this.http.remberOut(params).then(res => {
                if(res.data.errno === "000"){
                    this.$Message.success(res.data.errmsg)
                    // this.$store.dispatch("resetCurrSession")
                    // this.$router.go(0)
                    this.$store.dispatch("logout")
                }else{
                    this.$Message.error(res.data.errmsg)
                }
            })
        }
    },
    components: {
        RightContent
    }
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
<style>
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.demo-spin-col {
    height: 100px;
    position: relative;
    border: 1px solid #eee;
}
</style>